<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:insert="~{window-title :: home}" />
		<th:block th:insert="~{tmpl-head :: head}" />
		<th:block th:insert="~{tmpl-buttonclick-handler :: handler}" />
	</head>

	<body>
		<form action="" method="get" id="outerForm">
		<input type="hidden" id="serverId" name="serverId" th:value="${serverId}"></input> 
		<input th:if="${_csrf} != null" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />

		<div th:replace="~{tmpl-navbar-top :: top}" ></div>
		
		<div class="container-fluid">
			<div class="row">

				<div th:replace="~{tmpl-navbar-left :: left}" ></div>

				<div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main">

					<div th:replace="~{tmpl-banner :: banner}"></div>

					<!-- ********************************************************** -->
					<!-- ** Default Home                                         ** -->
					<!-- ********************************************************** -->

						<div th:replace="~{tmpl-home-welcome :: banner}"></div>

						<table class="table table-bordered table-striped" th:if="${resourceName.empty}">
							<colgroup>
								<col class="col-xs-1" />
								<col class="col-xs-7" />
							</colgroup>
							<tbody>
								<tr th:if="${!#strings.isEmpty(conf.implementation.description)}">
									<td>Server</td>
									<td th:utext="'' + ${conf.implementation.description}">HAPI Restful Server</td>
								</tr>
								<tr th:if="${!#strings.isEmpty(conf.software.name)} or ${!#strings.isEmpty(conf.software.version)}">
									<td>Software</td>
									<td>
										<th:block th:utext="'' + ${conf.software.name}"/> - <th:block th:utext="'' + ${conf.software.version}"/>
									</td>
								</tr>
								<tr>
									<td>FHIR Base</td>
									<td>
										<a th:href="${base}" th:text="${base}"></a>
									</td>
								</tr>
							</tbody>
						</table>

						<!-- ************************************************ -->
						<!-- ** Server Actions (no resource selected)      ** -->
						<!-- ************************************************ -->

						<div class="card" th:if="${resourceName.empty}">
							<h3 class="card-header">Server Actions</h3>
							<div class="card-body">
								<div class="container-fluid">
							
								<!-- Conformance -->
								
									<div class="row">
                              <div class="col-12">
   										Retrieve the server's <b>conformance</b> statement.
                              </div>
									</div>
								    <div class="row">
								    	<div class="col-sm-3 form-group">
											<div class="d-grid gap-2">
												<a type="button" id="fetch-conformance-btn"
													class="btn btn-primary">
													<i class="far fa-dot-circle"></i>
													Conformance
												</a>
											</div>
											<script type="text/javascript">
												$('#fetch-conformance-btn').click(
													function() {
														handleActionButtonClick($(this));
														$("#outerForm").attr("action", "conformance").submit();
													});
											</script>
										</div>
									</div>
									
								<!-- Server History -->
								
									<br clear="all"/>
									<div class="row">
                              <div class="col-12">
                                 Retrieve the update <b>history</b> across all resource types on
                                 the server.
                              </div>
									</div>
								    <div class="row top-buffer">
								    	<div class="col-sm-3">
											<div class="d-grid gap-29">
												<button type="button" id="server-history-btn" class="btn btn-primary">
													<i class="far fa-calendar-alt"></i>
													History
												</button>
											</div>
								    	</div>
								        <div class='col-sm-5'>
								            <div class="form-group">
								                <div class='input-group date' id='server-history-datetime' data-bs-toggledate-format="YYYY-MM-DDTHH:mm:ss">
                                           <div>
                                               <span class="input-group-text">
      								                    Since
                                               </span>
								                    </div>
								                    <input type='text' class="form-control" id="server-history-since"/>
                                           <div class=" input-group-addon"> <!-- input-group-addon is from Bootstrap3 but the time picker needs it there -->
                                               <span class="input-group-text">
								                           <i class="far fa-calendar-alt"></i>
                                               </span>
								                    </div>
								                </div>
								            </div>
								        </div>
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group'>
                                           <div>
                                               <span class="input-group-text">
								                           Limit #
                                               </span>
								                    </div>
								                    <input type="text" class="form-control" id="server-history-limit" placeholder="(opt)"/>
								                </div>
								            </div>
								        </div>
								        <script type="text/javascript">
								            $(function () {
								                $('#server-history-datetime').datetimepicker({
								                	sideBySide: true,
								                	keepInvalid: true,
								                	format: 'YYYY-MM-DDTHH:mm:ssZ'
								                });
								            });
								            $('#server-history-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var limit = $('#server-history-limit').val();
													if (limit != null) btn.append($('<input />', { type: 'hidden', name: 'limit', value: limit }));
													var since = $('#server-history-since').val();
													if (since != null) btn.append($('<input />', { type: 'hidden', name: 'since', value: since }));
													$("#outerForm").attr("action", "history-server").submit();
												});								            
								        </script>
								        
								    </div>
								    
								<!-- Transaction -->
								
									<br clear="all"/>
									<div class="row">
                              <div class="col-12">
                                 Post a bundle containing multiple resources to the server and
                                 store all resources within a single atomic transaction.
                              </div>
									</div>
								    <div class="row">
								    	<div class="col-sm-3">
											<div class="d-grid gap-2">
												<button type="button" id="transaction-btn" class="btn btn-primary">
													<i class="fas fa-file-archive"></i>
													Transaction
												</button>
											</div>
										</div>
										<div class='col-sm-9'>
								            <div class="form-group">
								                <div class='input-group'>
                                           <div class="input-group-prepend">
                                               <span class="input-group-text">
								                           Bundle
								                           <span class="loadingStar">*</span>
                                               </span>
								                    </div>
								                    <textarea class="form-control" id="transaction-body" style="white-space: nowrap; overflow: auto;" placeholder="(place transaction bundle body here)" rows="1"><th:block th:if="${transactionBundle} != null" th:text="${transactionBundle}"/></textarea>
								                </div>
								            </div>
								        </div>											
								        <script type="text/javascript">
							        		var textAreaChanger = function() {
							        			createBodyOriginalHeight = $('#transaction-body').height();
							        			$('#transaction-body').animate({height: "200px"}, 500);
							        		}								        	
								        	$('#transaction-body').focus(textAreaChanger);
								            $('#transaction-btn').click(
												function() {
													var btn = $(this);
													handleActionButtonClick($(this));
													var id = $('#transaction-id').val();
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'resource-create-id', value: id }));
													var body = $('#transaction-body').val();
													btn.append($('<input />', { type: 'hidden', name: 'transactionBody', value: body }));
													$("#outerForm").attr("method", "post");
													$("#outerForm").attr("action", "transaction").submit();
												});		
											$( document ).ready(function() {
/* 												if ($('#resource-create-id').val() != "") {
													buttonChanger();
													textAreaChanger();
													$('#transaction-body').focus();
												}
 */											});
								        </script>								        
								    </div>

								<!-- Get Tags -->
								<!-- 
								
									<br clear="all"/>
									<div class="row">
										Show all of the tags currently in use on the server										
									</div>
								    <div class="row">
								    	<div class="col-sm-3 form-group">
											<button type="button" id="get-server-tags-btn" class="btn btn-primary btn-block">
												<span class="fa fa-tags"></i>
												Get Tags
											</button>
											<script type="text/javascript">
												$('#get-server-tags-btn').click(
														function() {
															var btn = $(this);
															handleActionButtonClick($(this));
															$("#outerForm").attr("action", "get-tags").submit();
														});
											</script>
										</div>
									</div>

								-->
								<!-- Next Server Action? -->
								    
								</div>
							</div>
						</div>

				</div>
			</div>
		</div>

	</form>
	
	<div th:replace="~{tmpl-footer :: footer}" ></div>
</body>
</html>
